<template>
  <div>
    <el-button
      type="primary"
      style="margin-left: 30px; margin-top: 30px"
      @click="openDialog"
      >新增朋辈</el-button
    >
     <el-table
      ref="multipleTable"
      :data="FriendData"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px; margin-bottom: 100px;margin-left: 30px;"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="朋辈照片" width="100">
        <template slot-scope="scope"
          ><img :src="scope.row.photoAdress" style="width: 70px; height: 70px"
        /></template>
      </el-table-column>
      <el-table-column label="朋辈姓名" width="140">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="朋辈学院" width="170">
        <template slot-scope="scope">
          {{ scope.row.college }}
        </template>
      </el-table-column>
      <el-table-column label="朋辈爱好" show-overflow-tooltip width="150">
        <template slot-scope="scope">
          {{ scope.row.hobby }}
        </template>
      </el-table-column>
      
      <el-table-column label="朋辈专业" width="150">
        <template slot-scope="scope">{{ scope.row.profession }}</template>
      </el-table-column>
      <el-table-column label="朋辈年级" width="150">
        <template slot-scope="scope">{{ scope.row.年级 }}</template>
      </el-table-column>
      <el-table-column label="朋辈简介" width="150">
        <template slot-scope="scope">{{ scope.row.instructionHtml }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="UpdateFriend(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="FriendDelete(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
   
    <!-- 对话框1 -->
    <el-dialog :title="diffTitle" :visible.sync="dialogFormVisible">
      <el-form :model="formdata" :rules="rules" ref="userform">
        <el-form-item
          label="朋辈学院"
          :label-width="formLabelWidth"
          size="small"
          prop="college"
        >
          <el-input v-model="formdata.college" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="朋辈爱好"
          :label-width="formLabelWidth"
          prop="hobby"
        >
          <el-input v-model="formdata.hobby" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="朋辈简介"
          :label-width="formLabelWidth"
          prop="instructionHtml"
        >
          <el-input
            v-model="formdata.instructionHtml"
            autocomplete="off"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="朋辈互助名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="formdata.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="朋辈专业"
          :label-width="formLabelWidth"
          prop="profession"
        >
          <el-input v-model="formdata.profession" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="朋辈年级"
          :label-width="formLabelWidth"
          prop="年级"
        >
          <el-input v-model="formdata.年级" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item prop="avatar">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="EditImg"
            style="margin-top: 10px"
            >选择图片</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFriend">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 头像对话框 -->
    <el-dialog title="选择标签图片" :visible.sync="isShow" class="second-dig">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="Fake Action"
        :on-change="handleChange"
        :file-list="fileList"
        :auto-upload="false"
        :http-request="handleHttpRequest"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >确定</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件,且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Phydata',
  data() {
    return {
      isShow:false,
      FriendData:[],
      loading:true,
       formLabelWidth: "120px",
      flieData: null,
      fileList: [],
       dialogFormVisible: false,
        titleShow: false,
      formdata: {
        college: "",
        hobby: "",
        instructionHtml: "",
        name: "",
        id: null,
        photoAdress: "",
        profession: null,
        年级: "",
      },
      rules: {
        college: [
          { required: true, message: "请输入学院", trigger: "change" },
        ],
        hobby: [
          { required: true, message: "请输入个人爱好", trigger: "", type: "" },
        ],
        instructionHtml: [{ required: true, message: "请输入简介", trigger: "change" }],
        name: [
          { required: true, message: "请输入朋辈互助名称", trigger: "change" },
        ],
        profession: [{ required: true, message: "请输入专业", trigger: "change" },],
        年级: [{ required: true, message: "请输入年级", trigger: "change" },],
        
      },
    }
  },
  mounted() {
    this.GetAllFriendInfo()
  },
  computed: {
    diffTitle() {
      if (this.titleShow == false) {
        return "修改朋辈";
      } else {
        return "新增朋辈";
      }
    },
  },
  methods: {
    //拿到首页所有朋辈信息
    async GetAllFriendInfo() {
      let res = await this.$store.dispatch(
        "doctorWithFriend/GetAllFriendInfo",
        this.docInfo
      );
      if (res == "ok") {
        this.loading = false;
        this.FriendData = this.$store.state.doctorWithFriend.friendData;
        console.log(this.FriendData)
      }
    },
    openDialog() {
      //打开对话框
      this.dialogFormVisible = true;
      this.titleShow = true;
    },
    //打开头像选择器
    EditImg() {
      this.isShow = true;
    },
    // 以下都为上传头像方法
    handleChange(file) {
      this.flieData = file;
    },
    async handleHttpRequest() {
      let formData = new FormData();
      formData.append("file", this.flieData.raw);
      let res = await this.$store.dispatch("user/LinUpdataFile", formData);
      // console.log(this.formdata);
      if (res != '') {
        this.formdata.photoAdress = res;
      }
      that.$message({
        message: "已选择图片",
        type: "success",
        showClose: true,
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
      this.isShow = false;
    },
    //增加朋辈/修改
    async addFriend(){
      this.loading = true
       if (this.formdata.photoAdress == "") {
        this.$message({
          type: "error",
          message: "请先选择图片资源",
        });
        return;
      }
      if (this.titleShow == true) {
          if (this.Validate() != false) {
          // console.log(this.formdata)
          let res = await this.$store.dispatch(
            "doctorWithFriend/AddFriendInfo",
            this.formdata
          );
          if (res == "ok") {
            this.GetAllFriendInfo();
            this.dialogFormVisible = false;
            this.loading = false
            this.$message({
              type: "success",
              message: "朋辈新增成功",
            });
          }
            }
      } else {
        //修改
        if (this.Validate() != false) {
          let res = await this.$store.dispatch(
            "doctorWithFriend/UpdateFriendInfo",
            this.formdata
          );
          if (res == "ok") {
            this.GetAllFriendInfo();
            this.dialogFormVisible = false;
            this.loading = false
            this.$message({
              type: "success",
              message: "朋辈修改成功",
            });
          }
        }
      }
    },
    //表单验证
    Validate() {
      this.$refs.userform.validate((valid) => {
        if (!valid) {
          return false;
        }
        
      });
    },
    //修改朋辈
    UpdateFriend(data){
      this.titleShow = false
      this.dialogFormVisible = true
      const newdata = this.formdata
      this.formdata = {...newdata,...data}
      //  console.log(this.formdata)
    },
    //删除朋辈
   async FriendDelete(id){
    this.$confirm("此操作将删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async ()=>{
        let res = await this.$store.dispatch('doctorWithFriend/DeleteFriendInfo',id)
      if(res == 'ok'){
        this.GetAllFriendInfo()
        this.$message({
              type: "success",
              message: "朋辈删除成功",
            });
      }
      })
      
    },
    //改变当前页
    handCurrentPage(val){
      this.studentInfo.current = val
      this.ForGetStuData(this.studentInfo);
      
    },
    //上一页
    handprevPage(val){
      this.studentInfo.current = val
      this.ForGetStuData(this.studentInfo);
      
    },
    //下一页
    handNextPage(val){
      this.studentInfo.current = val
      this.ForGetStuData(this.studentInfo);
      
    }
  },
}
</script>

<style>

</style>
